<template>
  <div style="backgroundColor:#fdfafa">
    <div class="top">
      <el-card class="box-card1">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" :label-position="labelPosition">
          <el-form-item label="仓库编号">
            <el-input v-model="formInline.code" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="仓库名称">
            <el-input v-model="formInline.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="仓库状态">
            <el-select v-model="formInline.status" placeholder="全部">
              <el-option label="全部" value="全部" />
              <el-option label="停用" value="停用" />
              <el-option label="启用" value="启用" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="warning" round @click="search">搜索</el-button>
            <el-button round>重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <div class="bottom">
      <el-card class="box-card2">
        <div>
          <el-button type="success" round class="newBank-btn" @click="newBank">新增仓库</el-button>
        </div>
        <div class="table">
          <template>
            <!-- 表格 -->
            <el-table :data="recordsList" border style="width: 100%">
              <el-table-column prop="num" label="序号" width="50" />
              <el-table-column prop="code" label="编码" width="150" />
              <el-table-column prop="name" label="仓库名称" width="150" />
              <el-table-column prop="location" label="地址" width="200" />
              <el-table-column prop="address" label="详细地址" width="300" />
              <el-table-column prop="status" label="状态" width="120" />
              <el-table-column prop="surface" label="面积" width="120" />
              <el-table-column prop="includedNum" label="库区数量" width="120" />
              <el-table-column prop="personName" label="负责人" width="120" />
              <el-table-column prop="phone" label="电话" width="120" />
              <el-table-column prop="updateTime" label="更新时间" width="200" />
              <el-table-column fixed="right" label="操作" width="150">
                <template>
                  <el-button type="text" size="small">编辑</el-button>
                  <el-button type="text" size="small">启用</el-button>
                  <el-button type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
              :current-page="params.current"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="params.pagesize"
              layout="total,sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />

          </template>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getBankList } from '@/api'
export default {
  components: {},
  data() {
    return {
      labelPosition: 'top',
      formInline: {
        code: '',
        name: '',
        status: ''
      },
      select: '',
      // 仓库列表数据
      recordsList: [],
      // 分页参数
      params: {
        like_code: '',
        like_name: '',
        current: 1,
        size: 10,
        descs: 'createTime',
        status: ''
      },
      // 总条数
      total: 0
    }
  },
  created() {
    this.fetchBankList(this.params)
  },
  methods: {
    // 搜索
    search() {
      console.log(this.formInline)
      this.params.like_code = this.formInline.code
      this.params.like_name = this.formInline.name
      this.params.status = this.formInline.status
      this.fetchBankList(this.params)
      // console.log(this.formInline.status)
      // console.log(this.formInline.code)
      // console.log(this.formInline.name)
    },
    newBank() {
      this.$router.push('/details')
    },
    // 获取仓库列表
    async fetchBankList() {
      const { data } = await getBankList(this.params)
      this.recordsList = data.records
      this.total = parseInt(data.total)
      this.pages = data.pages
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(newPage) {
      // 将页码赋值当前的最新页码
      this.params.current = newPage
      // 获取最新的表格数据
      this.fetchBankList()
    }
  }
}

</script>
<style lang='scss' scoped>
  .top {
    width: 1226px;
  }
  .bottom {
    width: 1226px;
  }
  .box-card1 {
    margin: 30px 30px 0 30px;
    width: 100%;
    height: 127px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    border-radius: 12px;

    .fontSize {
      font-size: 12px;
      font-family: PingFangSC,PingFangSC-Medium;
      font-weight: 500;

      span {
        margin-right: 226px;
      }
    }
    .inputSearch {
      width: 244px;
      height: 40px;
      margin-top: 16px;
      margin-right: 30px;
    }
  }
  .box-card2 {
    margin: 30px 30px 0 30px;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    border-radius: 12px;

    .newBank-btn {
      background-color:#00be76;
      margin: 0 0 0 10px ;
    }
    .newBank-btn:hover {
      background-color: #007a4c;
    }
    .table {
      margin-top: 20px;
    }
  }
  .el-select .el-input {
    width: 130px;
  }
  .el-button:hover {
    background-color: #ff8e00;
  }

</style>
